<!-- 按考试科目 -->
<template>
	<view class="subject">
		<!-- 顶部图片说明 -->
		<image class="top-bg"
			src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/10/16/d25eba71bacf49a0a29d889e4299e5ae.png"
			mode="widthFix"></image>
		<view class="contents">
			<view class="searchs">
				<view class="search-box flex align-center">
					<view class="input-box flex alignCenter u-flex-1">
						<uni-icons type="search" size="20" color="#000"></uni-icons>
						<input class="font14" placeholder="请输入考试内容或考试科目编号" v-model="searchParam.exam" />
					</view>
					<view class="u-p-r-30" @click="handleSearch">搜索</view>
				</view>
				<view class="other-box flex alignCenter">
					<view class="search-select font12 flex alignCenter" @click="handlePopup">
						<text class="bold font12" :class="!examList1.length?'':'font14 select-item'">数学偏好</text>
						<uni-icons type="bottom" size="14" :color="examList1.length?'#F7DD5E':'#000'" style="margin-left: 10rpx;"
							@click.stop="handlePopup"></uni-icons>
					</view>
					<view class="search-select font12 flex alignCenter" @click="handlePopup">
						<text class="bold font12" :class="!examList2.length?'':'font14 select-item'">英语偏好</text>
						<uni-icons type="bottom" size="14" :color="examList2.length?'#F7DD5E':'#000'" style="margin-left: 10rpx;"
							@click.stop="handlePopup"></uni-icons>
					</view>
				</view>
			</view>
			<view class="lists">


				<uniList>
					<uni-list-item class="list-item" v-for="(item,index) in majorList" :key="index">
						<template slot="body">
							<view>
								<view class="title font14 bold flex alignCenter">
									<image src="../../static/title-img.jpg" mode="widthFix"></image>
									{{item.examSubject}}
								</view>
								<view class="major-item flex">
									<view class="major-name flex">
										<span class="font16 bold">{{item.majorCode}}-{{item.majorName}}</span>
										<span class="type font12 bold">{{item.studyType=='1'?'全日制':(item.studyType=='2'?'非全日制':'')}}</span>
									</view>
									<view class="hot-num font14 bold flex">
										<image src="@/static/image/index/hot.png" mode="widthFix"></image>{{item.hot}}
									</view>
								</view>
								<view class="year-schools flex flexWrap">
									<view class="school-item" v-for="(val,i) in item.schoolList" :key="i" @click="handleSchool(val,item)">
										<view class="icon-right"><uni-icons type="forward" size="16" color="#000"></uni-icons></view>
										<view class="num font12">
											<view class="font18 bold">{{val.num || 0 }}</view> 所大学
										</view>
										<view class="year font12">{{val.year}}年</view>
									</view>
								</view>
								<view class="title font14 bold flex direction-title">
									<image src="../../static/title-img.jpg" mode="widthFix"></image> 研究方向
								</view>
								<view class="direction-list ">
									<view class="direction-item flex" v-for="(val,i) in item.directionList" :key="i">
										<view class="name font14">{{val.name}}</view>
										<view class="font12 flex" @click="handleDirection(val,item)"><span
												class="num font18 bold">{{val.schoolNum}}</span> 所 <uni-icons type="forward" size="16"
												color="#000"></uni-icons></view>
									</view>
								</view>
							</view>
						</template>
					</uni-list-item>
				</uniList>
			</view>
		</view>
		<view class="no-data" v-if="!majorList.length">
			<image src="http://image.alhelp.net/uploads/20231104/8d4f88d27dfddc10b427fbe997780eaf.png" mode="widthFix">
			</image>
			<view v-if="searchParam.exam.length<=0" class="font14 color999">输入考试内容以查询数据</view>
			<view v-else class="font14 color999">暂无数据</view>
		</view>

		<view class="u-p-b-40 u-p-t-40">
			<u-loadmore v-if="majorList.length" font-size="24" :status="status" />
		</view>



		<u-popup mode="bottom" v-model="searchPopup" :mask-close-able="false">
			<view class="popup-box">
				<view class="flex btns">
					<view class="font14 cancel" @click="handleCancel">取消</view>
					<view class="font14 sure" @click="handleSure">确认</view>
				</view>
				<view class="search-contents">
					<view class="title font14 bold">数学偏好(非必选)</view>
					<uni-data-checkbox multiple v-model="examList1" :localdata="options.mathOption"></uni-data-checkbox>
					<view class="title font14 bold">英语偏好(非必选)</view>
					<uni-data-checkbox multiple v-model="examList2" :localdata="options.englishOption"></uni-data-checkbox>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		listByExam
	} from "@/api/toolbox.js"
	import uniList from "../../components/uni-list/components/uni-list/uni-list.vue";
	import uniListItem from "../../components/uni-list/components/uni-list-item/uni-list-item.vue";
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				status: 'loadmore',
				searchPopup: false,
				total: 0,
				isNext: true, //是否访问下一页
				examList1: [],
				examList2: [],
				searchParam: {
					exam: '',
					examList: [],
					pageNum: 1,
					pageSize: 10,
					reasonable: true,
					year: "",
					isKwkd: true,
					hot: '',
				},
				majorList: [],
				options: {
					mathOption: [{
						text: '不考数学',
						value: 'false'
					}, {
						text: '数一',
						value: '数学(一)'
					}, {
						text: '数二',
						value: '数学(二)'
					}, {
						text: '数三',
						value: '数学(三)'
					}],
					englishOption: [{
						text: '英一',
						value: '英语(一)'
					}, {
						text: '英二',
						value: '英语(二)'
					}, {
						text: '日语',
						value: '日语'
					}, {
						text: '俄语',
						value: '俄语'
					}, {
						text: '德语',
						value: '德语'
					}, {
						text: '梵文',
						value: '梵文'
					}]
				},
			}
		},
		onShow() {
		},
		methods: {
			handleSearch() {
				if (!this.searchParam.exam) {
					uni.showToast({
						title: '请输入考试内容或编号',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.searchParam.pageNum = 1;
				this.isNext = true;
				this.total = 1;
				this.getData();
			},
			handleClear() {
				this.searchParam.exam = '';
				this.handleSearch();
			},
			handlePopup() {
				this.searchPopup = true;
			},
			// 搜索弹框确认按钮
			handleSure() {
				this.searchParam.examList = this.examList1.concat(this.examList2);
				this.searchPopup = false;
				this.handleSearch();
			},
			// 搜索弹框取消按钮
			handleCancel() {
				this.examList1 = this.searchParam.examList;
				this.examList2 = this.searchParam.examList;
				this.searchPopup = false;
			},

			getData() {
				uni.showLoading({
					title: '数据加载中'
				})
				listByExam(this.searchParam).then((res) => {
					console.log('res: ', res);
					if (res.code == 100000) {
						if (res.data.rows.length) {
							let list = res.data.rows.map(e => {
								let arr = e.directionList.length ? e.directionList.map(v => {
									return {
										name: v.name,
										schoolNum: v.schoolNum
									}
								}) : [];
								return {
									examSubject: e.examSubject,
									majorCode: e.majorCode,
									majorName: e.majorName,
									studyType: e.studyType,
									hot: e.hot,
									directionList: arr,
									schoolList: [{
											year: 2023,
											num: e['2023'],
											code: e['2023schoolCode']
										},
										{
											year: 2022,
											num: e['2022'],
											code: e['2022schoolCode']
										},
										{
											year: 2021,
											num: e['2021'],
											code: e['2021schoolCode']
										},
										{
											year: 2020,
											num: e['2020'],
											code: e['2020schoolCode']
										}
									]
								}
							})
							if (this.searchParam.pageNum == 1) {
								this.majorList = list;
								this.total = res.data.total;
								return
							}
							this.majorList.push.apply(this.majorList, list);
						}
						if (!res.data.rows || res.data.rows.length < 10) {
							this.status = 'nomore';
						} else {
							this.status = 'loading';
						}
						
						console.log('this.majorList: ',this.majorList);
						
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			// 跳转大学列表
			handleSchool(val, item) {
				if (!val.code || !val.num) {
					return
				}
				let option = {
					year: val,
					majorCode: item.majorCode,
					examCode: item.examSubject,
					direction: '',
					studyType: item.studyType,
					schoolCodeList: val.code
				}
				uni.navigateTo({
					url: '/pages/toolbox/chooseMajor/school/serchSchool?item=' + JSON.stringify(option)
				})
			},
			// 跳转研究方向大学
			handleDirection(val, item) {
				let option = {
					year: new Date().getFullYear(),
					majorCode: item.majorCode,
					examCode: '',
					direction: val.name,
					studyType: item.studyType
				}
				uni.navigateTo({
					url: '/pages/toolbox/chooseMajor/school/serchSchool?item=' + JSON.stringify(option)
				})
			},
			//底部刷新
			onReachBottom() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.searchParam.pageNum++;
				this.getData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f2f2f2;
	}

	.subject {

		// background: #f2f2f2;
		// height: 100%;
		// min-height: 100vh;
		.top-bg {
			width: 100%;
			height: 280rpx;
			background: rgba(247, 221, 94, 0.8);
			// background: rgba(114,94,237,0.8);
		}

		.contents {
			.searchs {
				margin: -80rpx 30rpx 40rpx 30rpx;
				height: 208rpx;
				background: #ffffff;
				box-shadow: 0 0 12rpx rgba(0, 0, 0, .2);
				border-radius: 20rpx;
				position: sticky;
				top: 0rpx;
				/* #ifdef H5 */
				top: 80rpx;
				/* #endif */
				z-index: 1;

				.search-box {
					padding-top: 30rpx;

					.input-box {
						justify-content: center;
						border: 1px solid rgba(242, 242, 242, 1);
						border-radius: 50rpx;
						margin: 0 30rpx;
						height: 68rpx;

						input {
							margin: 0 10rpx;
							width: 400rpx;
						}
					}
				}

				.other-box {
					margin-top: 30rpx;
					margin-left: 40rpx;

					.search-select {
						color: #666666;
						width: 200rpx;
						// width: 244rpx;
						text-align: center;

						.select-item {
							color: #F7DD5E;
						}
					}
				}

			}

			.lists {
				margin: 0 30rpx;

				// padding-bottom: 10rpx;
				.list-item {
					box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.3);
					margin-bottom: 40rpx;
					border-radius: 20rpx;
					background: #ffffff;
					padding-bottom: 40rpx;

					.title {
						color: #7F7F7F;
						padding: 30rpx 0 40rpx 30rpx;
						align-items: center;

						image {
							width: 48rpx;
							height: 42rpx;
							margin-right: 10rpx;
							flex-shrink: 0;
						}
					}

					.major-item {
						align-items: center;
						justify-content: space-between;
						margin: 0 30rpx 24rpx 30rpx;

						.major-name {
							align-items: center;
							color: #333333;

							span:nth-child(1) {
								max-width: 420rpx;
							}

							.type {
								color: #aaaaaa;
								margin-left: 20rpx;
							}
						}

						.hot-num {
							color: #FF7101;
							// align-items: end;
						}

						image {
							width: 32rpx;
							height: 36rpx;
							// margin-right: 10rpx;
						}
					}

					.year-schools {
						margin: 0 30rpx;

						.school-item {
							background: rgba(248, 248, 248, 1);
							border: 2rpx dotted #eee;
							border-radius: 10rpx;
							// margin-right: 10rpx;
							width: 146rpx;
							// height: 164rpx;
							margin: auto;
							text-align: center;
							padding-bottom: 10rpx;

							.icon-right {
								position: absolute;
								margin-left: 118rpx;
								margin-top: 48rpx;
							}

							.num {
								background: #fff;
								width: 96rpx;
								height: 96rpx;
								border-radius: 50%;
								color: #333;
								margin: auto;
								line-height: 32rpx;
								margin-top: 20rpx;

								view {
									color: #F7DD5E;
									padding-top: 10rpx;
									line-height: 1em;
								}
							}

							.year {
								color: #333;
								margin-top: 16rpx // line-height: 1em;
							}
						}
					}

					.direction-title {
						padding-bottom: 14rpx;
					}

					.direction-list {
						margin: 0 30rpx;

						.direction-item {
							align-items: center;
							justify-content: space-between;
							color: #333;
							line-height: 72rpx;

							.num {
								color: #F7DD5E;
								margin-right: 10rpx;
							}

						}

					}
				}
			}

		}

		.no-data {
			text-align: center;
			margin-top: 120rpx;

			image {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.noMore-data {
			text-align: center;
			color: #afafaf;
			padding-bottom: 20rpx;
		}

		.popup-box {
			background: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			height: 480rpx;
			padding: 30rpx;

			.btns {
				align-items: center;
				justify-content: space-between;
				margin: 10rpx 0;

				.cancel {
					color: #AFAFAF;
				}

				.sure {
					color: #F7DD5E;
				}
			}

			.title {
				margin: 40rpx 0 10rpx;
				// margin-left: 30px;
				// margin-right: 15px;
			}
		}
	}
</style>